<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Hello world!</title>
    <!-- zui -->
    <link href="{{ asset('zui/css/zui.min.css')  }}" rel="stylesheet">
    <link href="{{ asset('zui/css/zui-theme.css')  }}" rel="stylesheet">
    <script src=" {{ asset('js/vue.js')  }} "></script>
    <script src=" {{ asset('js/jquery-1.11.0.min.js') }} "></script>
    <style>
        html,body{
            width: 100%;
            height: 100%;
            position: relative;
        }
        .login-form{
            position: absolute;
            width: 400px;
            left: 50%;
            margin-left:-200px;
            top:50%;
            margin-top:-200px;;
        }

        form{
            border: 1px solid #ccc;
            padding: 1em;
            background-color: #efefef;
        }
    </style>
</head>
<body>
    <div class="login-form" id="loginForm">
        <form>
            <div class="form-group">
                <label>用户名</label>
                <input type="text" class="form-control" v-model="form.name"  placeholder="用户名">
            </div>
            <div class="form-group">
                <label>密码</label>
                <input type="password" class="form-control" v-model="form.password" placeholder="">
            </div>
            <div class="form-group">
                <label for="exampleInputMoney1">验证码</label>
                <div class="input-group">
                    <span class="input-group-addon">￥</span>
                    <input type="number" class="form-control" id="exampleInputMoney1" placeholder="最低捐赠金额为 ￥10.00">
                    <span class="input-group-addon">.00</span>
                </div>
            </div>
            <div v-if="error" class="alert alert-danger">@{{error}}</div>
            <a @click="login" class="btn btn-primary">提交</a>
        </form>
    </div>
    <script>
        new Vue({
            el:'#loginForm',
            data:{
                form:{
                    name:'',
                    password:''
                },
                error:''
            },
            methods:{
                login:function(){
                    var _this = this ;

                    $.ajax({
                        url: "",
                        type: "POST",
                        data:this.form,
                        dataType:"json",
                        success: function(d, textStatus, xhr) {
                            if(d.hasOwnProperty('code') && d.code == 0){
                                window.location.href = '{{ url('/backend') }}/';
                            }else{
                                _this.error = d ;
                            }
                        },
                        error:function(xhr,text,error){
                            //console.log('xhr,text,error',xhr,text,error)
                            try {
                                var error = $.parseJSON(xhr.responseText) ;
                                _this.error = error.name;
                            }catch (e){
                                _this.error = xhr.responseText ;
                            }
                        },
                        complete: function(xhr, textStatus) {
                            console.log(xhr.status);
                        }
                    });
                }
            }
        })
    </script>
</body>
</html>